<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="my-body" style="position: relative">
        <el-button type="text" style="position: absolute;top: 60px;right: 20px;z-index: 99999" @click="add()">添加顶级
        </el-button>
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>
        <el-tabs v-model="activeName">
          <el-tab-pane label="机构管理" name="authorityManagement">
            <el-tree :data="tableData"
                     default-expand-all
                     draggable
                     @node-drop="nodeDrop"
                     node-key="id"
                     empty-text="暂无内容"
                     class="my-tree"
                     highlight-current
                     :expand-on-click-node="false"
                     :props="{label:'mechanismName'}"
                     :filter-node-method="filterNode"
                     ref="tree">
                   <span class="custom-tree-node my-text-cc" slot-scope="{ node, data }">
                      <span class="my-text-cc" @click="edit( data)" style="flex-grow:1">
                        {{ node.label }}<span style="color: #C0C4CC;margin-left: 20px;">{{ data.permissionCode }}</span>
                      </span>
                      <span>
                        <i class="el-icon-plus" style="color: #409EFF;font-weight: bolder;margin-right: 10px"
                           @click="add(node,data)"/>
                       <el-popconfirm
                           @onConfirm="remove(node, data)"
                           title="这是一段内容确定删除吗？">
                        <i class="el-icon-minus" style="color: #F56C6C" slot="reference"/>
                       </el-popconfirm>
                      </span>
                    </span>
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="my-body">
        <el-divider content-position="left">{{ editName }}{{ isAdd ? '新增' : '编辑' }}</el-divider>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="所属公司：" v-show="form.companyName">
            <span style="color: #909399">{{ form.companyName }}</span>
          </el-form-item>
          <el-form-item label="机构名称：" prop="mechanismName">
            <el-input v-model="form.mechanismName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="机构级别：" prop="cdType">
            <el-select v-model="form.cdType" placeholder="请选择" style="width: 100%">
              <el-option label="公司" :value=0></el-option>
              <el-option label="部门" :value=1></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构类型：" prop="institutionalLevel">
            <el-select v-model="form.institutionalLevel" placeholder="请选择" style="width: 100%">
              <el-option :label="v.dicValue" :value="v.dicKey" v-for="(v,i) in $store.state.dic['机构类型']"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属区域：" prop="frontendLink">
            <national-division v-model="form.divisionIntoDistricts"/>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address">
            <el-input type="textarea" placeholder="请输入详细地址" v-model="form.address"/>
          </el-form-item>
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="submit" style="width: 100px" :loading="loading">提交</el-button>
            <el-button style="width: 100px" @click="add">重置</el-button>
          </el-row>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import service from "@/api/service";
import NationalDivision from "@/components/NationalDivision";

export default {
  name: "mechanism",
  components: {
    NationalDivision
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      filterText: '',
      tableData: [],
      activeName: 'authorityManagement',
      selectData: '',
      parentName: '',
      form: {
        "companyId": "",
        "cdType": 0,
        "parentId": "",
        "parentIds": "",
        "mechanismName": "",
        "addressProvince": "",
        "addressCity": "",
        "addressArea": "",
        "address": "",
        "institutionalLevel": "",
        "companyName": "",
        "sortNumber": 0,
        "sortTime": "",
        divisionIntoDistricts: ''
      },
      rules: {
        mechanismName: {required: true, trigger: 'blur', message: '不能为空'},
      },
      loading: false,
      isAdd: true,
      editName: '',
    }
  },
  mounted() {

    this.init()
  },
  methods: {
    init() {
      this.loading = true
      service.get('/small-service-account/au-mechanism').then(res => {
        this.loading = false
        if (res.status === 200) {
          this.tableData = res.data;
        }
      })
    },
    add(node, data) {
      this.isAdd = true
      this.loading = false;
      if (data) {
        this.form.id = null;
        this.editName = data.mechanismName;
        this.form.parentId = data.id;
        this.form.parentIds = data.parentIds ? data.parentIds + ',' + data.id : data.id;
        this.form.companyId = data.companyId ? data.companyId : data.id;
        this.form.companyName = data.companyName ? data.companyName : data.mechanismName;
      } else {
        this.editName = null;
        this.$refs.ruleForm.resetFields();
        this.form.parentId = '';
        this.form.parentIds = '';
        this.form.companyId = '';
        this.form.companyName = '';
      }
    }, edit(data) {
      this.isAdd = false
      this.form = {...data};
      this.editName = null;
    }, remove(node, data) {
      service.del('/small-service-account/au-mechanism', {
        id: data.id
      }).then(res => {
        if (res.status === 200) {
          this.init()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    submit() {
      this.loading = true
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            service.put('/small-service-account/au-mechanism', this.form).then(res => {
              if (res.status === 200) {
                this.init()
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            service.post('/small-service-account/au-mechanism', this.form).then(res => {
              if (res.status === 200) {
                this.init()
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }
      })

    },
    nodeDrop(a, b, c) {
      service.post('/small-service-account/au-mechanism/node-drop', {
        original: a.data,
        target: b.data,
        nodeDrop: c
      }).then(res => {
        if (res.status === 200) {
          this.init()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.mechanismName.indexOf(value) !== -1;
    },
  }
}
</script>

<style scoped>
.my-tree >>> .is-current > .el-tree-node__content {
  color: #1b5de4;
  font-weight: 400;
  font-size: 18px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>